<template>
  <el-form
    class="demo-ruleForm"
    :model="adminForm"
    :rules="rules"
    ref="ruleForm"
    :visible="adminVisible"
    @update:visible="v=>$emit('update:adminVisible',false)"
  >
    <h3 class="header-h3">添加管理员页面</h3>
    <el-form-item prop="adminName">
      <el-input type="text" v-model="adminForm.adminName" placeholder="管理员账号"></el-input>
    </el-form-item>
    <el-form-item prop="passWord">
      <el-input type="password" v-model="adminForm.passWord" placeholder="管理员密码"></el-input>
    </el-form-item>
    <el-form-item prop="okps">
      <el-input type="password" v-model="adminForm.okps" placeholder="再次确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        :loading="$store.state.loading"
        style="width:40%"
        @click="submitFormAdmin('ruleForm')"
      >提交</el-button>
      <el-button type="primary" style="width:40%" @click="$emit('update:adminVisible',false)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "addAdmin",
  props: {
    adminVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        adminName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ],
        okps: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      },
      adminForm: {
        adminName: "",
        passWord: "",
        okps: ""
      }
    };
  },
  methods: {
    //添加管理员
    submitFormAdmin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.adminForm.passWord === this.adminForm.okps) {
            this.$store.dispatch("addAdmin", this.adminForm).then(data => {
              if (data.ok == 1) {
                // console.log("添加成功");
                this.$emit("update:adminVisible", false);
                this.$store.dispatch("getAdminList");
              }
            });
          } else {
            alert("两次密码输入不一致,请重新输入");
            this.$refs[formName].resetFields();
          }
        } else {
          alert("账号或密码格式不正确");
          this.$refs[formName].resetFields();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  margin-top: 10rem;
  opacity: 1;
  border: 1px solid #eaeaea;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 0px 1px rgb(115, 171, 207);
  margin: 50px auto;
  width: 400px;
}
.header-h3 {
  text-align: center;
}
</style>